<template>
    <div class="container">

        <div class="form">

            <el-row type="flex" justify="center">
                <el-col class="sys_title">颐养中心后台管理系统</el-col>
            </el-row>

            <el-row class="forminput">
                <el-input placeholder="请输入用户名" v-model="form.username" />
            </el-row>

            <el-row class="forminput">
                <el-input placeholder="请输入密码" v-model="form.password" type="password" show-password />
            </el-row>
            <el-row class="forminput">
                <el-button type="primary" class="btnLogin" @click="toLogin">登录</el-button>
            </el-row>
        </div>
    </div>

</template>

<script setup name="Login">
import { reactive } from 'vue';
import { ref } from 'vue'
import { login } from '@/api/permission/login';
import { useRouter } from 'vue-router';

const router = useRouter();

import { setToken } from '@/utils/auth'




const form = reactive({
    username: '',
    password: ''
})


//用于登录
function toLogin() {
    login(form).then(token => {
        if (token) {
            setToken(token);
            router.replace("/")
        }
    })
}





</script>

<style>
/*  容器 样式 */
.container {
    background-color: aliceblue;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

/* 表单 */
.form {
    width: 400px;
    height: 300px;

    background-color: #FFFFFF;
    border-radius: 6px;
    padding-top: 20px;


}

.sys_title {

    font-size: 1.3em;
    text-align: center;
}


.forminput {
    height: 40px;
    margin: 30px 10px;


}

.btnLogin {
    width: 100%;
}
</style>
